<template>
  <div>
    <el-table :data="tableData" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <!-- 共有的基础数据部分 -->
      <el-table-column v-for="column in columnList" :label="column.label" :prop="column.key" width="180" align="center">
        <template v-if="column.dict" #default="scope">
          <dict-tag :options="findDict(column.dict)" :value="scope.row[column.key]" />
        </template>
        <template v-else #default="scope">
        </template>
      </el-table-column>
      <!-- 从项目中获取的数据 -->
      <template v-if="currentRedgerType != '14' && currentRedgerType != '15'">
        <el-table-column v-for="column in pmDataList" :label="column.label" :prop="column.key" width="180"
          align="center" />
      </template>
      <!-- 预计金额 -->
      <el-table-column v-for="column in amountList" :label="column.label" :prop="column.key" width="180" align="center">
        <template v-if="column.dict" #default="scope">
          <dict-tag :options="findDict(column.dict)" :value="scope.row[column.key]" />
        </template>
        <template v-else #default="scope">
        </template>
      </el-table-column>
      <!-- 共有部分 -->
      <el-table-column v-for="column in commonTailList" :label="column.label" :prop="column.key" width="180"
        align="center">
        <template v-if="column.dict" #default="scope">
          <dict-tag :options="findDict(column.dict)" :value="scope.row[column.key]" />
        </template>
        <template v-else #default="scope">
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['system:redger:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
            v-hasPermi="['system:redger:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script setup lang="js">
import { ref, reactive, onMounted } from 'vue';
import { listRedger, delRedger } from '@/api/income.js'
import columnJson from '../fields/column.json'
const emit = defineEmits(['update']);
const { proxy } = getCurrentInstance();
// 字典引入
const { payment_type, construction_flag, plan_status } = proxy.useDict("payment_type", "construction_flag", "plan_status");

//获取表格json数据
const { common, commonTail, commonProjectData } = columnJson
// 表格数据
const tableData = ref([])
const loading = ref(true);
// 删除的ids
const ids = ref([]);
const multiple = ref()
// 数据总数
const total = ref(0)
//获取路由参数
const props = defineProps(['redgerType', 'multiple'])
const currentRedgerType = props.redgerType

watch(props, (newProps) => {
  multiple.value = newProps.multiple
}), { immediate: true }
watch(multiple, (newOpen) => {
  emit('update:multiple', newOpen)
})
// 搜索参数
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  redgerType: currentRedgerType
})

onMounted(() => {
  proxy.$bus.on('RefreshlLedger', (params) => {
    getList(params)
  })
  proxy.$bus.on('deletRedger', (row) => {
    handleDelete()
  })
})
//相同的列基础数据
const columnList = reformat(common)

const commonTailList = reformat(commonTail)
//项目中获取的数据
const pmDataList = Object.entries(commonProjectData).map(([key, value]) => ({
  key: `projectManagement.${key}`,
  label: value
}));

// 找到当前台账对应的金额数据
const thisLedger = Object.values(columnJson).find(item =>
  item.redgerType == currentRedgerType
);
const amountList = reformat(thisLedger.amountList)

//处理json数据
function reformat(jsonList) {
  const list = Object.entries(jsonList).map(([key, value]) => {
    if (value.dict) {
      return {
        key: key,
        label: value.label,
        dict: value.dict
      };
    } else {
      return {
        key: key,
        label: value
      };
    }
  })
  return list;
}
//获取列表数据
const getList = (seek) => {
  loading.value = true;
  listRedger(seek).then(res => {
    tableData.value = res.rows
    total.value = res.total;
    loading.value = false;
  }).catch(error => {
    console.log(error);
  })
}

/** 编辑按钮操作 */
function handleUpdate(row) {
  emit('update', row)
}
/** 删除按钮操作 */
function handleDelete(row) {
  // const rdgerId = row.id ? row.id : ids.value;
  var rdgerId = ''
  if (row == undefined) {
    rdgerId = ids.value;
  } else {
    rdgerId = row.id
  }
  proxy.$modal.confirm('是否确认删除?').then(function () {
    return delRedger(rdgerId);
  }).then(() => {
    getList(queryParams.value)
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}
/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  multiple.value = !selection.length;
}

function findDict(dict) {
  const name = dict
  dict = proxy.useDict(`${dict}`)
  return dict[name].value
}
getList(queryParams.value) 
</script>
<style scoped></style>